/**
 * Created by Administrator on 2017/1/9.
 */
window.onload = function(){
    init();
}
function init(){
//    alert('1')
    clickScreen();
    clickMusic();
}
function addEvent(element,event,listener){
    if(element.addEventListener){
        element.addEventListener(event,listener,false);
    }else if(element.attachEvent){
        element.attachEvent('on'+event,listener);
    }else{
        element['on'+event] = listener;
    }
}
function clickScreen(){
    var page1 = document.getElementById('pg_1');
    var page2 = document.getElementById('pg_2');
    var page3 = document.getElementById('pg_3');
    var container = document.getElementsByClassName('container')[0];
    addEvent(page1,'touchstart',function(){
        this.style.display = 'none';
        page2.style.display = 'block';
        setTimeout(function(){
//            page2.style.display = 'none';
            page3.style.display = 'block';
//            container.style.top = '100vh';
//            container.classList.add('fadeIn');
//            container.style.top = '0vh';
            page2.style.top = '-100vh';
            page3.style.top = '0vh';
        },2000)
    })
}
function clickMusic(){
    var music = document.getElementById('music');
    var music_rotate = music.firstElementChild;
    var audio = document.getElementsByTagName('audio')[0];

    addEvent(audio,'ended',function(){
        music_rotate.style.animationPlayState = 'paused';
    })
    addEvent(music,'click',function(){
        var _this = this;
        if(audio.paused){
            audio.play();
            music_rotate.style.animationPlayState = 'running';
        }else{
            audio.pause();
            music_rotate.style.animationPlayState = 'paused';
        }
    })
}